<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" :default-active="activeIndex"
    @select="handleSelect">
    <el-menu-item v-for="(item, index) in menuList" :index="item.path" :key="index">{{ item.meta.title }}</el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps<{
  menuList: Menu.MenuOptions[];
  firstActiveKey: string;
}>();

const emit = defineEmits<{
  (e: 'menu-select', path: string): void;
}>();

const activeIndex = ref('');

const handleSelect = (path: string) => {
  // activeIndex.value = path;
  emit('menu-select', path);
};

watch(() => props.firstActiveKey, (newVal) => {
  if (newVal) {
    activeIndex.value = newVal;
  }
  //如果是首页，则触发点击事件，回到首页
  // if (newVal === '/home/index') {
  //   handleSelect(newVal)
  // }
}, { immediate: true });
</script>

<style scoped lang="scss">
.el-menu-item.is-active::before {
  background-color: transparent;
}

.el-menu--horizontal.el-menu {
  margin-bottom: 5px;
}
</style>
